<%@ page language="java" contentType="text/html; charset=UTF-8"
	    pageEncoding="UTF-8"%>
<!-- 写了个公共类，把要导入的公共的文件写到一块，${ctx} -->		    
<%@include file="/WEB-INF/jsp/common/taglibs.jsp"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="${ctx}/lib/bootstrap-3.3.7-dist/css/bootstrap.css" />
	</head>
	<body>
		<!--导航栏开始-->
		<nav class="navbar navbar-default">
		  <div class="container">
		    <!-- Brand and toggle get grouped for better mobile display -->
		    <div class="navbar-header">
		      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
		        <span class="sr-only">Toggle navigation</span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		      </button>
		      <a class="navbar-brand" href="#">教务管理系统</a>
		    </div>
		    <!-- Collect the nav links, forms, and other content for toggling -->
		    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
		      <ul class="nav navbar-nav">
		        <li><a href="${ctx}/student/pageList.action"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>&nbsp;&nbsp;&nbsp;&nbsp;学生信息管理</a></li>
		        <li><a href="${ctx}/banji/pageList.action"><span class="glyphicon glyphicon-home" aria-hidden="true"></span>&nbsp;&nbsp;&nbsp;&nbsp;班级信息管理</a></li>
		         <li class="active"><a href="${ctx}/course/pageList.action"><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>&nbsp;&nbsp;&nbsp;&nbsp;课程信息管理</a></li>
		      </ul>
		      <ul class="nav navbar-nav navbar-right">
		       	<li><a><span aria-hidden="true"></span>欢迎登陆 ：${user.name}</a></li>&nbsp;&nbsp;&nbsp;&nbsp;
		       	<li><a href="${ctx}/login/logout.action"><span class="glyphicon glyphicon-off" aria-hidden="true"></span>&nbsp;&nbsp;&nbsp;&nbsp;注销</a></li>
		      </ul>
		    </div><!-- /.navbar-collapse -->
		  </div><!-- /.container-fluid -->
		</nav>
		<!--导航栏结束-->		
		
		<!--内容开始-->
		${requstScope.pageBean}
		<div class="container"><!--留白非全屏-->
			<div class="row">
				<!--左边部分开始-->
				<div class="col-md-2">
					<div class="list-group">
						  <a href="${ctx}/course/pageList.action" class="list-group-item active">
						    课程列表
						  </a>
						  <a href="javascript:insert()" class="list-group-item">课程添加</a>
						  <a href="javascript:deleteAll()" class="list-group-item">批量删除</a>
					</div>
					
				</div>
				<!--左边部分结束-->
				
				<!--右边部分开始-->
				<div class="col-md-10">
					<!-- 搜索 -->
					<form action="${ctx}/course/pageList.action" id="searchFrom" method="post">
						<input type="hidden" id="pageNo" name="pageNo"/>
						课程：<input type="text" name="name" value="${condition.name}"/>
						分值：<input type="text" name="credit" value="${condition.credit}"/>
						时长：<input type="text" name="classhour" value="${condition.classhour}"/>
					<input type="submit" value="搜索"/>					
					</form>
				
					<!-- form表单批量删除拿到id，不要忘 -->
					<form action="" id="mainForm" method="post">
						<table class="table table-bordered">
							<tr>
								<td><input type="checkbox" id="selectAlls" onclick="selectAll()"></td>
								<th>ID</th>
								<th>课程名称</th>
								<th>课程分值</th>
								<th>课程时长</th>
								<th>修改</th>
								<th>删除</th>
							</tr>
							<c:forEach items="${pageBean.list}" var="course">
								<tr>
								<td><input type="checkbox" name="selectIds" value="${course.id}"/></td>
								<td>${course.id}</td>
								<td>${course.name}</td>
								<td>${course.credit}</td>
								<td>${course.classhour}</td>
								<td><a href="javascript:toUpdata(${course.id})">修改</a></td>
								<td><a href="javascript:deleteById(${course.id})">删除</a></td>
							</tr>
							</c:forEach>
	  					</table>
					</form>
					
					<nav aria-label="Page navigation">
						<ul class="pagination">
						
						<!-- 上一页开始 -->
							<c:if test="${pageBean.pageNo == 1}">
								<li class="disabled">
									<a  href="#" aria-label="Previous">
				       					<span aria-hidden="true">&laquo;</span>
				   					</a>
								</li>
							</c:if>
							<c:if test="${pageBean.pageNo != 1 }">
						      	 <!-- 搜素后点击不变 -->
						      	  <li >
								      <%-- <a href="${ctx}/course/pageList.action?pageNo=${pageBean.pageNo - 1}&pageSize=3" aria-label="Previous"> --%>
								      <a href="javascript:goPage(${pageBean.pageNo - 1})" aria-label="Previous">	
								      	<span aria-hidden="true">&laquo;</span>
								      </a>
								  </li>
			      			</c:if>
						<!-- 上一页结束 -->
						
						<!-- 中间页数开始 -->
							<!-- 变量为i，初始为1，结束为最大页数 -->
					    	<c:forEach var="i" begin="1" end="${pageBean.totalPage}">
					   	 	<c:if test="${i == pageBean.pageNo }">
								<li class="active"><a href="#">${i}</a></li>
					    	</c:if>
					    	<c:if test="${i != pageBean.pageNo}">
								<%-- <li><a href="${ctx}/course/pageList.action?pageNo=${i}&pageSize=3">${i}</a></li> --%>
								<li><a href="javascript:goPage(${i})">${i}</a></li>
					    	</c:if>
					    	</c:forEach>
						<!-- 中间页数结束 -->
						
						<!-- 下一页开始 -->
							<c:if test="${pageBean.pageNo == pageBean.totalPage}">
					    		 <li class="disabled">
					      			<a  href="#" aria-label="Previous">
						        		<span aria-hidden="true">&raquo;</span>
						   			</a>
						   	  	</li>
			   				 </c:if>
					     	<c:if test="${pageBean.pageNo != pageBean.totalPage}">
					    	 	<li >
						      		<%-- <a href="${ctx}/course/pageList.action?pageNo=${pageBean.pageNo + 1}&pageSize=3" aria-label="Previous"> --%>
						      		<a href="javascript:goPage(${pageBean.pageNo + 1})" aria-label="Previous">	
						        		<span aria-hidden="true">&raquo;</span>
						      		</a>
						  		</li>
					     	</c:if>
						<!-- 下一页结束 -->
						</ul>
					</nav>
				</div>
				<!--右边部分结束-->
			</div>
		</div>
		<!--内容结束-->
		<script type="text/javascript" src="${ctx}/lib/jquery/jquery-1.11.1.js" ></script>
		<script type="text/javascript" src="${ctx}/lib/bootstrap-3.3.7-dist/js/npm.js" ></script>
		<script type="text/javascript" src="${ctx}/lib/layer-v3.1.1/layer/layer.js" ></script>
		<script type="text/javascript" src="${ctx}/lib/bootstrap-3.3.7-dist/js/mylayer.js" ></script>
		<script type="text/javascript">
			//点击事件
			function deleteById(id){
				layer.confirm(
						"确认删除吗？",
					function(index){
						console.log("点了确定");
						$.post(
							"${ctx}/course/deleteById.action?id=" + id,
							function(data){
								if(data){
									mylayer.success("删除成功");
									setTimeout(function(){
										location.reload();
									},800);
								} else {
									mylayer.errorMsg("删除失败");
								}								
							},
							"json"
						);
					},
					function(index){
						console.log("点了取消");
					}
				);
			}
			
			//批量删除得到状态
			function selectAll(){
				//得到全选、反选按钮的状态
				var isChecked = $("#selectAlls").prop("checked");
				//使下面的按钮的状态和总的一致
				$("input[name=selectIds]").prop("checked",isChecked);
			}
			
			//批量删除
			function deleteAll(){
			layer.confirm(
				"确认删除吗",
				function(index){
					console.log("点击了确定");
					$.post(
						"${ctx}/course/deleteAll.action",  //跳转方法
						$("#mainForm").serialize(),   //把form表单的id提交
						function(data){
							if(data){
								mylayer.success("删除成功");
								setTimeout(function() {
									location.reload();
									}, 800);
							} else {
								mylayer.errorMsg("删除失败");
							}
						},
						"json"
					);
				},
				function(index){
						console.log("点了取消");
				}
			);
		}
			
			//插入
			function insert(){
				layer.open({
					type : 2,
					title : "添加课程信息",
					area : ["500px","400px"],
					offset : "100px",
					content : "${ctx}/course/getInsertPage.action"
				})
			}
			
			//修改
			function toUpdata(id){
				layer.open({
					type : 2,
					title : "修改",
					area : ["500px","400px"],
					offset : "100px",
					content : "${ctx}/course/toUpdate.action?id=" + id
				})
			}
			
			/* 搜索提交表单
			原先查找是所有数据的第N页，现在是查询出结果的第N页 */
			function goPage(i){
				$("#pageNo").val(i);
				$("#searchFrom").submit();
			}
			
			function doSearch(){
				var searchName = $("#searhName").val();
				location.href="${ctx}/course/pageList.action?searchName=" + searchName ;
			}
		</script>
	</body>
</html>
